<template>
  <a-modal
    :title="titleMap"
    :width="550"
    :visible.sync="visible"
    :body-style="{ 'padding-top': '0px', paddingBottom: '80px' }"
    @ok="submit"
    @cancel="close"
    :ok-text="$t('user.verification-code.required1166')"
    :cancel-text="$t('user.email.required11')"
  >
    <a-form
      :form="form"
      :label-col="{ span: 5 }"
      :wrapper-col="{ span: 19 }"
      layout="horizontal"
    >
      <a-form-item
        :label="
          types === 'write'
            ? $t('u.add.drdt')
            : $t('user.login.mobile.verification-code.placeholder1')
        "
      >
        <a-select
          :placeholder="
            types === 'write'
              ? $t('u.add.drdt')
              : $t('user.login.mobile.verification-code.placeholder2')
          "
          option-filter-prop="children"
          :filter-option="filterOption"
          show-search
          v-decorator="[
            'UserIds',
            {
              rules: [
                {
                  required: true,
                  message: $t('user.verification-code.required111566110577256'),
                },
              ],
            },
          ]"
          :default-active-first-option="false"
          v-model="inputValue"
          @search="filte1rOption"
          :showArrow="false"
          :filterOption="false"
          style="width: 440px"
          :disabled="disabled"
        >
          <a-select-option
            v-for="item in userList"
            :value="item.value"
            :key="item.value"
          >
            {{ item.label }}
          </a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import { getUserList } from "@/api/common/form";
import { addpermissions, addWrites } from "@/api/dpia/form";

export default {
  props: {
    dpiaId: {
      type: Number,
    },
    types: {
      type: String,
    },
  },
  data() {
    return {
      inputValue: "",
      disabled: false,
      keyword: "",
      // 下面这些都是通用的
      form: this.$form.createForm(this),
      visible: false,
      loading: false,
      userList: [],
      // 这个要根据服务修改title
      titleMap: "",
      // titleMap: ['新建', '修改'],
      mode: 0,
    };
  },
  watch: {
    async inputValue(value) {
      const { data } = await getUserList({ UserEmail: value, UserName: value });
      this.userList = data;
    },
  },
  methods: {
    async filte1rOption(value) {
      this.inputValue = value;
      // if (event.key === 'Enter'|| event.keyCode === 13){
      //   const value = event.target.value;
      //   const { data } = await userQuery1({ YtAdminName: value });
      //   this.userList = data
      //   console.log("search:", this.userList)
      // }
    },
    async filterOption(value) {
      // 获取用户列表下拉
      // const { data: userList } = await userQuery1({ YtAdminName: value });
      // this.userList = userList
      // return (
      //   option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      // );
    },
    async open(mode) {
      this.titleMap = this.$t("user.verification-code.required111566110577255");
      this.mode = mode;
      this.visible = true;
      // // 获取用户列表下拉
      // const { data: userList } = await userQuery1(1);
      // this.userList = userList
    },
    // 提交 通用的
    submit() {
      const {
        form: { validateFields },
      } = this;
      // 按钮loading
      this.loading = true;
      // validateFields 是校验form表单数据
      // force: true 是默认所有字段都校验
      // values 表单的值
      validateFields({ force: true }, async (err, values) => {
        if (!err) {
          try {
            const params = { ...values };
            if (this.mode == "write") {
              params.UserIds = params.UserIds.replaceAll("/", "#@%$");
              await addWrites({ Id: this.dpiaId, ...params });
            } else {
              params.UserIds = params.UserIds.replaceAll("/", "#@%$");
              await addpermissions({ Id: this.dpiaId, ...params });
            }

            // 如果成功就调用父页面当前组件的succeed上绑定的事件
            this.$emit("succeed");
            this.$message.success(
              this.$t("menu.account.logout11229922779945445432654445566")
            );
            //如果成功就关闭
            this.close();
          } catch (error) {
            console.log("err", error);
            this.$message.error(error);
          } finally {
            this.loading = false;
          }
        } else {
          setTimeout(() => {
            this.loading = false;
          }, 600);
        }
      });
    },
    // 关闭 通用的
    close() {
      // 修改侧边栏状态
      this.visible = false;
      // 清空form的值
      this.form.resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .ant-form-item-label {
  display: inline-block;
  overflow: visible;
  line-height: 39.9999px;
  text-align: right;
  vertical-align: middle;
  margin-right: 20px !important;
}
</style>